<template>
	<view class="page">
		<nav-bar title="会员卡详情" bgColor="#FFF" titleColor="#000"></nav-bar>
		<view class="card">
			<card-item :cardItem="cardDetail" :stores='false'></card-item>
			<scroll-view scroll-y="true" :style="{height:mainHeight+'px'}">
				<view class="card-title">
					会员卡
				</view>
				<view class="list">
					<li v-for="(item, index) in cardConfig" :key="index">
						<view class="list-item">
							<view class="img"></view>
							<view class="title">{{ item.label }}</view>
						</view>
						<view class="content">{{ cardDetail[item.key] || '暂无' }}<text>{{ item.endSlot }}</text></view>
					</li>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar'
	import CardItem from './components/cardItem.vue'
	import api_membership from '@/api/membership'
	export default {
		components: {
			NavBar,
			CardItem
		},
		data() {
			return {
				cardId: '',
				cardDetail: {},
				cardConfig: [{
						label: '适用门店',
						key: 'stores'
					},
					{
						label: '购买金额',
						key: 'buyMoney',
						endSlot: '元'
					},
					{
						label: '会员卡天数',
						key: 'days',
						endSlot: '天'
					},
					// { label: '折扣率', key: 'discountRate', endSlot: '折' },
					{
						label: '日均价',
						key: 'dayAveragePrice',
						endSlot: '元'
					},
					{
						label: '赠送优惠券名称',
						key: 'couponName'
					},
					{
						label: '赠送优惠券数量',
						key: 'couponNumber'
					},
					{
						label: '购买时间',
						key: 'createTime'
					},
					{
						label: '会员卡结束时间',
						key: 'endTime'
					},
					{
						label: '规则说明',
						key: 'ruleDescr'
					}
				],
				mainHeight: '',
				storeId:''
			}
		},
		onLoad(options) {
			this.mainHeight = this.$store.getters.heightData.mainHeight.split('px')[0] - 200
			this.cardId = options.id
			this.storeId = options.storeId
			this.getMemberDetail()
		},
		methods: {
			getMemberDetail() {
				// const params = {
				// 	id: this.cardId,
				// 	storeId: this.storeId
				// }
				// console.log(params);
				api_membership.fetchMemberDetail(this.cardId).then(res => {
					if (res.code !== 200) return
					this.cardDetail = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.card {
			padding: 0 36rpx;

			.card-title {
				font-size: 36rpx;
				font-weight: 600;
				font-family: Source Han Sans CN, Source Han Sans CN;
			}

			.list {
				padding: 12rpx 2rpx 0;

				li {
					padding: 16rpx;

					.list-item {
						display: flex;

						.img {
							width: 20rpx;
							height: 20rpx;
							border: 5rpx solid #C27E15;
							border-radius: 16rpx;
							margin-top: 10rpx;
						}

						.title {
							margin-left: 20rpx;
							font-size: 30rpx;
							font-weight: 500;
						}
					}

					.content {
						margin-left: 30rpx;
						line-height: 38rpx;
						padding: 16rpx;
					}

				}
			}
		}
	}
</style>